<!--
~   Copyright (c) 2016, WSO2 Inc. (http://wso2.com) All Rights Reserved.
~
~   Licensed under the Apache License, Version 2.0 (the "License");
~   you may not use this file except in compliance with the License.
~   You may obtain a copy of the License at
~
~        http://www.apache.org/licenses/LICENSE-2.0
~
~   Unless required by applicable law or agreed to in writing, software
~   distributed under the License is distributed on an "AS IS" BASIS,
~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~   See the License for the specific language governing permissions and
~   limitations under the License.
-->

<html lang="en" class="webkit chrome mac js gr__localhost" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Ballerina Composer</title>

    <!-- Favion -->
    <link href="images/favicon.png" rel="icon" type="image/png" sizes="16x16" />

    <script src="lib/css-browser-selector_0.4.0/css_browser_selector.js"></script>

    <link href="lib/font-wso2-1.2.1/css/font-wso2.min.css" rel="stylesheet" type="text/css"/>
    <link href="lib/theme-wso2-2.0.0/css/theme-wso2.css" rel="stylesheet" type="text/css"/>
    <link href="lib/jquery-ui_v1.12.1.custom/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="lib/js-tree-v3.3.2/themes/default/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/layout.css" rel="stylesheet" type="text/css"/>
    <link href="css/styles.css" rel="stylesheet" type="text/css"/>
    <link href="css/welcome-screen.css" rel="stylesheet" type="text/css"/>
    <link href="css/tab-styles.css" rel="stylesheet" type="text/css"/>
    <link href="css/notification.css" rel="stylesheet" type="text/css"/>
    <link href="css/fileDialog.css" rel="stylesheet" type="text/css"/>
    <link href="lib/mCustomScrollbar_v3.1.5/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
    <link href="lib/context-menu_v2.4.2/jquery.contextMenu.min.css" rel="stylesheet" type="text/css"/>
    <link href="lib/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="css/sequence_diagram/sequenced-styles.css"/>
    <link rel="stylesheet" type="text/css" href="css/ballerina-file-editor.css"/>
    <link rel="stylesheet" type="text/css" href="css/menu-bar.css"/>
    <link rel="stylesheet" type="text/css" href="css/tool-palette.css"/>
    <link rel="stylesheet" type="text/css" href="css/workspace-explorer.css"/>
    <link rel="stylesheet" type="text/css" href="css/diagram/preview-pane.css"/>
    <link rel="stylesheet" type="text/css" href="css/debugger.css"/>
    <link rel="stylesheet" type="text/css" href="css/left-tool-bar.css"/>
    <link rel="stylesheet" type="text/css" href="css/type-mapper.css"/>
</head>
<body class="sticky-footer">

<!-- Start: header -->
<header class="header header-default">
    <!-- Start: header - logo, title & menu-bar -->
    <div id="header-container" class="container-fluid">
        <div class="pull-left brand">
            <a href="#">
                <span>Ballerina</span> <span class="orange">Composer </span>
            </a>
        </div>
        <div id="menu-bar-container" class="menu-bar">
        </div>
    </div>
    <!-- End: header - logo, title & menu-bar -->
</header>
<!-- End: header -->

<!-- Start: page-content-wrapper -->
<div id="page-content-wrapper" class="">
    <div id="welcome-container"></div>
    <div id="page-content" class="container">
        <div id="page-content-first-row" class="row">
            <div id="alerts-container" class="alert row">
            </div>
            <!-- End: alerts container row -->
            <!-- Start: breadcrumb row -->
            <div class="row" id="breadcrumb-container" >
                <!--<ol class="breadcrumb" id="breadcrumbs">-->
                <!--</ol>-->
            </div>
            <!-- End: breadcrumb row -->
            <!-- Start: file explorer and editor area row -->
            <div class="row">
                <!-- Start: left container -->
                <div class="left-container">
                    <!-- Start: left tool bar -->
                    <div class="left-tool-bar" data-toggle="tooltip">
                        <ul class="nav nav-tabs" role="tablist">
                            <li>
                                <a href="#workspace-explorer" role="tab" data-toggle="tab" class="workspace-explorer-activate-btn">
                                    <i class="fw fw-file-browse fw-lg"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#launcher" role="tab" data-toggle="tab" class="launcher-activate-btn">
                                    <i class="fw fw-start fw-lg"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#debugger" role="tab" data-toggle="tab" class="debugger-activate-btn">
                                    <i class="fw fw-bug fw-lg"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- End: left tool bar -->
                    <!-- Start: left side-bar -->
                    <div class="sidebar-left tab-content">
                    </div>
                    <div class="sidebar-left-separator"  draggable="true"></div>
                    <!-- End: left side-bar -->
                </div>
                <!-- End: left container -->
                <!-- Start: right container -->
                <div class="right-container">
                    <!-- Start: service tabs wrapper container-->
                    <div class="container-fluid" id="service-tabs-wrapper">
                        <!-- Start: service tabs wrapper row -->
                        <div class="row">
                            <!-- Start: service tabs -->
                            <div id="tabs-container" class="col-sm-12">
                                <div class="tab-headers tab-headers-bar">
                                </div>
                                <div  id="tab-content-wrapper" class="grid-background" style="height: calc(100% - 20px);">
                                    <div class="tab-content tab-content-default "></div>
                                    <div class="notification-container" id="notification-container"></div>
                                </div>
                            </div>
                        </div>
                        <!-- End: service tabs -->
                    </div>
                    <!-- End: service tabs wrapper row -->
                    <div id="console-container" class="col-sm-12 hide">
                        <div class="console-header">Console <a class="closeConsole"><i class="fw fw-cancel"></i></a></div>
                        <div id="console">
                        </div>
                    </div>
                </div>
                <!-- End: service tabs wrapper container-->
            </div>
            <!-- End: right container -->
        </div>
        <!-- End: file explorer and editor area row -->
    </div>
</div>
<!-- End: page-content-wrapper -->

<!-- Start: footer -->
<footer class="footer">
    <div id="footer-container" class="container-fluid">
        <p>Ballerina Composer v0.8.0 | ©
            <script>document.write(new Date().getFullYear());</script>
            <a href="http://wso2.com/" target="_blank"><i class="icon fw fw-wso2"></i> Inc</a>.
        </p>
    </div>
</footer>
<!-- End: footer -->

<!-- Start: Template for a tab -->
<div style="display: none" id="tab-template">
    <!-- Start: Tab -->
    <div class="tab-container">
        <!-- Start: design view container -->
        <div class="design-view-container">
            <!-- Start: tool-palette -->
            <div class="tool-palette-container"></div>
            <!-- End: tool-palette -->
            <!-- Start: TopRight Controls Container -->
            <div class="top-right-controls-container">
                <!--Property Pane for editing package name and imports-->
                <div class="top-right-controls-container-editor-pane main-action-wrapper import-packages-pane">
                    <div class="action-content-wrapper">
                        <div class="action-content-wrapper-heading import-wrapper-heading">
                            <span>Import :</span>
                            <input id="import-package-text" type="text">
                            <div class="action-icon-wrapper">
                                <span class="fw-stack fw-lg">
                                    <i class="fw fw-square fw-stack-2x"></i>
                                    <i class="fw fw-add fw-stack-1x fw-inverse"></i>
                                 </span>
                            </div>
                        </div>
                        <div class="action-content-wrapper-body">
                            <!--Div for imports-->
                            <div class="imports-wrapper">
                                <span class="font-bold">Current Imports </span>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End: TopRight Controls Container  -->
            <!-- Start: BottomRight Controls Container -->
            <div class="bottom-right-controls-container">
                <div class="view-source-btn btn-icon">
                    <i class="fw fw-code-view fw-inverse"></i>
                    <span class="bottom-view-label">Source View</span>
                </div>
                <div class="view-swagger-btn btn-icon">
                    <i class="fw fw-swagger fw-inverse "></i>
                    <span class="bottom-view-label">Swagger View</span>
                </div>
            </div>
            <!-- End: BottomRight Controls Container  -->
        </div>
        <!-- End: design view container -->
        <!-- Start: source view container -->
        <div class="source-view-container">
            <!-- Start: BottomRight Controls Container -->
            <div class="bottom-right-controls-container">
                <div class="view-design-btn btn-icon">
                    <i class="fw fw-design-view fw-inverse"></i>
                    <span class="bottom-view-label" >Design View</span>
                </div>
                <div class="view-swagger-btn btn-icon">
                    <i class="fw fw-swagger fw-inverse "></i>
                    <span class="bottom-view-label">Swagger View</span>
                </div>
            </div>
            <!-- End: BottomRight Controls Container  -->
        </div>
        <!-- End source view container  -->
        <!-- Start: swagger view container -->
        <div class="swagger-view-container">
            <!-- Start: BottomRight Controls Container -->
            <div class="swaggerEditor" data-editor-url="lib/swagger-editor/#/">
            </div>
            <!-- Start: BottomRight Controls Container -->
            <div class="bottom-right-controls-container">
                <div class="view-design-btn btn-icon">
                    <i class="fw fw-design-view fw-inverse"></i>
                    <span class="bottom-view-label" >Design View</span>
                </div>
                <div class="view-source-btn btn-icon">
                    <i class="fw fw-code-view fw-inverse"></i>
                    <span class="bottom-view-label">Source View</span>
                </div>
            </div>
            <!-- End: BottomRight Controls Container  -->
        </div>
        <!-- End swagger view container  -->
        <!-- Start: Preview Container -->
        <div class="preview-container">
        </div>
        <!-- End Preview Container -->
    </div>
</div>
<!-- End: Template for service tab -->

<!-- Start: Modal for file-browser -->
<div class="modal fade" id="fileBrowserModel" tabindex="1000" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="onFileBrowserClose();" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Select root folder</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid .file-browser-container">
                    <div id="fileTree"></div>
                    <div id="file-browser-error" class="alert alert-danger" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  id="cancelBtn">Cancel</button>
                <button type="button" class="btn btn-primary"  id="selectBtn">Select</button>
            </div>
        </div>
    </div>
</div>
<!-- End: Modal for file-browser -->

<!-- Start: Warning validation for number of endpoints on canvas-->
<div id="endpointModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="color:lightgoldenrodyellow">Warning!</h4>
            </div>
            <div class="modal-body">
                <p>Only one endpoint per resource is supported in this version.</p>
            </div>
        </div>
    </div>
</div>
<!-- End: Warning validation for number of endpoints on canvas-->

<!-- Start: Modal for file dialog for saving the configuration-->
<div class="modal fade" id="newConfigModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="newConfigModalLabel">New Ballerina Configuration Wizard</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="location" class="control-label col-sm-2">Location</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="location" placeholder="eg: /home/user/wso2-integration-server/ballerina-configs">
                            </div>
                            <div class="col-sm-2" style="float: right">
                                <button type="button" class="btn btn-primary" id="openFileBrowserBtn">Select Folder</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="configName" class="control-label col-sm-2">File Name</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="configName" placeholder="eg: hotel-check-in.xyz">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">cancel</button>
                                <button type="button" class="btn btn-primary" id="createBtn">create
                                </button>
                            </div>
                        </div>
                    </form>
                    <div id="newWizardError" class="alert alert-danger">
                        <strong>Error!</strong> Something went wrong.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Modal for file dialog for saving the configuration-->

<!-- Start: Set Service Parameters Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="servicePropertiesModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Set Service Parameters</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" style="margin-top: 25px">
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="basePath">Base Path</label>
                        <div class="col-md-8">
                            <input id="basePath" name="basePath" type="text" placeholder="/basepath" class="form-control input-md">

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="produces">Produces</label>
                        <div class="col-md-8">
                            <input id="produces" name="produces" type="text" placeholder="MediaType.APPLICATION_JSON" class="form-control input-md">
                        </div>
                    </div>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="packageName">Package Name</label>
                        <div class="col-md-8">
                            <input id="packageName" name="packageName" type="text" placeholder="com.sample" class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="description">Description</label>
                        <div class="col-md-8">
                            <input id="description" name="description" type="text" placeholder="Your Description Here" class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="tags">Tags</label>
                        <div class="col-md-8">
                            <input id="tags" name="tags" type="text" placeholder="tag1,tag2" class="form-control input-md">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveServiceProperties()">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- End: Set Service Parameters Modal -->

<!--Start: About Modal-->
<div class="modal fade" id="modalAbout" tabindex="-1" role="dialog" aria-label="modalDemo">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel  about-dialog-close"></i></button>
                <h3 class="modal-title" id="aboutModalLabel">Welcome to Ballerina Composer</h3>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <p>See <a target="_blank" href="https://github.com/ballerinalang/ballerina/tree/master/docs/specification">here</a>
                    for documentation and <a target="_blank" href="https://github.com/ballerinalang/composer/issues">here</a> for reporting issues.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--End: About Modal-->

<!--Start: About Modal-->
<div class="modal fade" id="parserErrorModel" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fw fw-cancel  about-dialog-close"></i></button>
                <h3 class="modal-title" id="errorModalLabel">Error</h3>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <p>Unable to render design view due to a parser error</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
      </div>
    </div>
</div>
<!--End: About Modal-->

<!--Start: Search Modal-->
<div class="modal fade" id="modalSearch" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fw fw-cancel about-dialog-close"></i>
                </button>
                <h4 class="modal-title" >Search</h4>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <div class="modal-search-bar">
                    <i class="fw fw-search modal-search-icon"></i>
                    <input class="search-input" id="modal-search-field" placeholder="Search" type="text">
                </div>
                <div class="search-results">
                    <ul class="list-group">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End: Search Modal-->

<!--Start: Debug Modal-->
<div class="modal fade debug" id="modalDebugConnection" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fw fw-cancel about-dialog-close"></i>
                </button>
                <h4 class="modal-title" >Debug Connection</h4>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
              <div class="form-group debug-connection-group">
                <label class="sr-only" for="debugUrl">Server URL</label>
                <div class="input-group">
                  <div class="input-group-addon">ws://</div>
                  <input type="text" class="form-control" id="debugUrl" placeholder="localhost:5006" value="localhost:5006" />
                </div>
                <span class="help-block debug-connection-error hide"><i class="fw fw-alert"></i> Connection error please check provided URL.</span>
              </div>
              <div class='form-group'>
                    <button type='button' class='btn pull-right btn-file-dialog' data-dismiss='modal'>Cancel</button>
                    <button type='button' class='btn btn-primary pull-right btn-file-dialog debug-connect-button'>Debug</button>
              </div>
            </div>
        </div>
    </div>
</div>
<!--End: Debug Modal-->

<!--Start: Open Folder Modal-->
<div class='modal fade' id='open-folder-modal' tabindex='-1' role='dialog' aria-hidden='true'>
    <div class='modal-dialog file-dialog' role='document'>
        <div class='modal-content'>
            <div class='modal-header'>
                <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                    <span aria-hidden='true'>&times;</span>
                </button>
                <h4 class='modal-title file-dialog-title'>Open Folder</h4>
                <hr class='style1'>
            </div>
            <div class='modal-body'>
                <div class='container-fluid'>
                    <form class='form-horizontal'>
                        <div class='form-group'>
                            <label for='location' class='col-sm-2 file-dialog-label'>Location :</label>
                            <div class='col-sm-9'>
                                <input type='text' class='file-dialog-form-control location-input'
                                       placeholder='eg: /home/user/wso2-integration-server/ballerina-configs'>
                            </div>
                        </div>
                        <div class='form-group'>
                            <div class='file-dialog-form-scrollable-block'>
                                <div class='file-tree'>
                                </div>
                                <div class='alert alert-danger file-browser-error' style='display: none;'>
                                </div>
                            </div>
                        </div>
                        <div class='form-group'>
                            <div class='folder-dialog-form-btn'>
                                <button type='button' class='btn btn-file-dialog open-button'>open
                                </button>
                                <div class='divider'></div>
                                <button type='button' class='btn btn-file-dialog' data-dismiss='modal'>cancel</button>
                            </div>
                        </div>
                    </form>
                    <div class='alert alert-danger errors-container'>
                        <strong>Error!</strong> Something went wrong.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End: Open Folder Modal-->

<!--Start: Settings Modal-->
<div class="modal fade" id="modalSettings" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel  about-dialog-close"></i></button>
                <h3 class="modal-title" id="aboutSettingsLabel">Settings</h3>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <form>
                    <h3>Source View</h3>
                    <hr />
                    <div class="form-group">
                        <label for="sourceViewTheme">Theme</label>
                        <select class="form-control" id="sourceViewTheme">
                            <optgroup label="Bright">
                                <option value="ace/theme/chrome">Chrome</option>
                                <option value="ace/theme/clouds">Clouds</option>
                                <option value="ace/theme/crimson_editor">Crimson Editor</option>
                                <option value="ace/theme/dawn">Dawn</option>
                                <option value="ace/theme/dreamweaver">Dreamweaver</option>
                                <option value="ace/theme/eclipse">Eclipse</option>
                                <option value="ace/theme/github">GitHub</option>
                                <option value="ace/theme/iplastic">IPlastic</option>
                                <option value="ace/theme/solarized_light">Solarized Light</option>
                                <option value="ace/theme/textmate">TextMate</option>
                                <option value="ace/theme/tomorrow">Tomorrow</option>
                                <option value="ace/theme/xcode">XCode</option>
                                <option value="ace/theme/kuroir">Kuroir</option>
                                <option value="ace/theme/katzenmilch">KatzenMilch</option>
                                <option value="ace/theme/sqlserver">SQL Server</option>
                            </optgroup>
                            <optgroup label="Dark">
                                <option value="ace/theme/ambiance">Ambiance</option>
                                <option value="ace/theme/ballerina">Ballerina(Default)</option>
                                <option value="ace/theme/chaos">Chaos</option>
                                <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
                                <option value="ace/theme/cobalt">Cobalt</option>
                                <option value="ace/theme/gruvbox">Gruvbox</option>
                                <option value="ace/theme/idle_fingers">idle Fingers</option>
                                <option value="ace/theme/kr_theme">krTheme</option>
                                <option value="ace/theme/merbivore">Merbivore</option>
                                <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
                                <option value="ace/theme/mono_industrial">Mono Industrial</option>
                                <option value="ace/theme/monokai">Monokai</option>
                                <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
                                <option value="ace/theme/solarized_dark">Solarized Dark</option>
                                <option value="ace/theme/terminal">Terminal</option>
                                <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
                                <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
                                <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
                                <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
                                <option value="ace/theme/twilight">Twilight</option>
                                <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="sourceViewFontSize">Font Size</label>
                        <select class="form-control" id="sourceViewFontSize">
                            <option value="10px">10px</option>
                            <option value="11px">11px</option>
                            <option value="12px" selected="selected">12px</option>
                            <option value="13px">13px</option>
                            <option value="14px">14px</option>
                            <option value="15px">15px</option>
                            <option value="16px">16px</option>
                            <option value="17px">17px</option>
                            <option value="18px">18px</option>
                            <option value="19px">19px</option>
                            <option value="20px">20px</option>
                            <option value="21px">21px</option>
                            <option value="22px">22px</option>
                            <option value="23px">23px</option>
                            <option value="24px">24px</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="saveSettingsButton">OK</button>
            </div>
        </div>
    </div>
</div>
<!--End: About Modal-->

<script src="lib/requirejs-2.3.2/require.js"></script>
<script type="text/javascript">
    requirejs.config({
        package_listing: "http://localhost:8289/service/packages",
        baseUrl: window.location.protocol + "//" + window.location.host + window.location.pathname.split("/").slice(0, -1).join("/"),
        paths: {
            lib: "lib",
            app: "js",
            /////////////////////////
            // third party modules //
            ////////////////////////
            jquery: "lib/jquery_v1.9.1/jquery-1.9.1.min",
            jquery_ui: "lib/jquery-ui_v1.12.1.custom/jquery-ui",
            bootstrap: "lib/bootstrap_v3.3.6/js/bootstrap",
            d3: "lib/d3_v4.1.1/d3",
            dagre: "lib/dagre-0.7.4/dagre.min",
            log4javascript: "lib/log4javascript-1.4.13/log4javascript",
            lodash: "lib/lodash_v4.13.1/lodash",
            backbone: "lib/backbone_v1.3.3/backbone",
            svg_pan_zoom: "lib/svg-panNZoom/jquery.svg.pan.zoom",
            js_tree: "lib/js-tree-v3.3.2/jstree",
            theme_wso2: "lib/theme-wso2-2.0.0/js/theme-wso2",
            ace: "lib/ace_v1.2.6",
            beautify: "lib/beautify/beautify",
            mousetrap: "lib/mousetrap_v1.6.0/mousetrap.min",
            mcustom_scroller: "lib/mCustomScrollbar_v3.1.5/js/jquery.mCustomScrollbar",
            jquery_mousewheel: "lib/jquery-mousewheel_v3.1.13/jquery.mousewheel",
            jquery_context_menu: "lib/context-menu_v2.4.2/jquery.contextMenu.min",
            html5_shiv: "lib/html5shiv_3.7.2/html5shiv.min",
            respond: "lib/respond_1.4.2/respond.min",
            jsPlumb: "lib/jsPlumb-2.2.8/jsPlumb-2.2.8-min",
            yaml: "lib/js-yaml-v3.7.0/dist/js-yaml.min",
            typeahead: "lib/typeahead_v0.11.1/typeahead.bundle.min",
            select2: "lib/select2-4.0.3/dist/js/select2.full.min",
            ///////////////////////
            // custom modules ////
            //////////////////////
            log: "js/log/log",
            d3utils: "js/utils/d3-utils",
            diagram_core: "js/diagram-core/module",
            command: "js/command/command",
            event_channel: "js/event/channel",
            drag_drop_manager: "js/drag-drop/manager",
            main_elements: "js/main-elements/module",
            processors: "js/processors/module",
            file_browser: "js/file-browser/file-browser",
            menu_bar: "js/menu-bar/menu-bar",
            context_menu: "js/context-menu/context-menu",
            tool_bar: "js/tool-bar/tool-bar",
            alerts: "js/utils/alerts",
            breadcrumbs: "js/breadcrumbs/breadcrumbs",
            property_pane_utils: "js/property-pane/property-pane-utils",
            debugger: "js/debugger/debugger",
			expression_editor_utils: "js/expression-editor/expression-editor-utils",
            constants: 'js/constants/constants',
            typeMapper: 'js/type-mapper/type-mapper-renderer',
            environment_content: "js/ballerina/env/environment-content",
            bal_utils: "js/ballerina/utils",
            bal_configs: "js/ballerina/configs",
            console: "js/launcher/console"
        },
        shim: {
            "bootstrap": {"deps": ['jquery']},
            "theme_wso2": {"deps": ['jquery', 'bootstrap', 'html5_shiv', 'respond', 'select2']},
            "jsPlumb": {
                deps: ['jquery','jquery_ui'],
                exports: 'jsPlumb'
            },
            "mcustom_scroller":{"deps": ['jquery', "jquery_mousewheel"]},
            "typeahead": {
                deps: ['jquery'],
                init: function ($) {
                    return require.s.contexts._.registry['typeahead.js'].factory( $ );
                }
            }
        },
        map: {
            "*": {
                // use lodash instead of underscore
                underscore: "lodash",
                jQuery: "jquery"
            }
        },
        packages: [
            {
                name: 'welcome-page',
                location: 'js/welcome-page',
                main: 'module'
            },
            {
                name: 'tree_view',
                location: 'js/tree-view',
                main: 'module'
            },
            {
                name: 'ballerina',
                location: 'js/ballerina',
                main: 'module'
            },
            {
                name: 'workspace',
                location: 'js/workspace',
                main: 'module'
            },
            {
                name: 'antlr',
                location: 'lib/antlr_v4.5.3',
                main: 'index'
            },
            {
                name: 'tab',
                location: 'js/tab',
                main: 'module'
            },
            {
                name: 'dialogs',
                location: 'js/dialog',
                main: 'module'
            },
            {
                name: 'debugger',
                location: 'js/debugger',
                main: 'module'
            }
        ]
    });

    require(['app/main'], function(Application) {
        var app, config;
        config = {
            container: "#page-content",
            welcome:{
                container:"#welcome-container",
                cssClass :{
                    parent: "initial-background-container",
                    outer: "initial-welcome-container",
                    heading: "heading-welcome-container",
                    headingTitle: "welcome-title",
                    body: "body-welcome-container",
                    bodyTitle: "welcome-body-title",
                    headingIcon: "welcome-icon",
                    buttonNew: " btn btn-block new-welcome-button",
                    buttonOpen: " btn btn-block open-welcome-button",
                    samples: "welcome-samples",
                    headingTop: "top-heading",
                    btnWrap1: "btn-wrap"
                },
                samples: ["resources/samples/echoService.bal", "resources/samples/helloWorld.bal",
                    "resources/samples/passthroughService.bal", "resources/samples/routingServices.bal"]
            },
            services:   {
                workspace:  {
                    endpoint: "http://localhost:8289/service/workspace"
                },
                packages:  {
                    endpoint: "http://localhost:8289/ballerina/editor/packages"
                },
                swagger:  {
                    endpoint: "http://localhost:8289/service/swagger/"
                },
                parser:  {
                    endpoint: "http://localhost:8289/ballerina/model/content"
                },
                validator:  {
                    endpoint: "http://localhost:8289/ballerina/validate"
                },
                launcher: {
                    endpoint: "ws://localhost:9092/launch"
                }
            },
            alerts: {
                container: "#alerts-container",
                cssClass: {
                }
            },
            tool_bar: {
                container: ""
            },
            menu_bar: {
                container: "#menu-bar-container",
                menu_group: {
                    menu_item: {
                        cssClass: {
                            label: "menu-label pull-left",
                            shortcut: "shortcut-label pull-right",
                            active: "menu-item-enabled",
                            inactive: "menu-item-disabled"
                        }
                    },
                    cssClass: {
                        group: "menu-group file-menu-group",
                        menu: "dropdown-menu file-dropdown-menu",
                        toggle: "dropdown-toggle"
                    }
                },
                cssClass: {
                    menu_bar: "dropdown-menu file-dropdown-menu"
                }
            },
            breadcrumbs:{
                container: "#breadcrumb-container",
                cssClass:  {
                    active: "active",
                    list: "breadcrumb pull-left",
                    item: "breadcrumb-item"
                }
            },
            tab_controller: {
                container: "#tabs-container",
                headers:    {
                    // relative selector within container for tab controller
                    container: ".tab-headers",
                    cssClass: {
                        list: 'nav nav-tabs nav-tabs-bar',
                        item: '',
                        active: 'active'
                    }
                },
                tabs: {
                    // relative selector within container for tab controller
                    container: ".tab-content",
                    tab: {
                        template: "#tab-template",
                        cssClass: {
                            tab: 'tab-pane',
                            tab_active: 'active',
                            tab_close_btn: 'close closeTab pull-right'
                        },
                        ballerina_editor: {
                            design_view: {
                                // relative selector within container for a tab
                                container: '.design-view-container',
                                canvas_container: '.canvas-container',
                                new_drop_timeout: 3000,
                                tool_palette: {
                                    // relative selector within container for design view
                                    container: ".tool-palette-container",
                                    search_bar: {
                                        cssClass:{
                                            search_box: 'search-bar',
                                            search_icon: 'fw fw-search searchIcon',
                                            search_input: 'search-input'
                                        }
                                    },
                                    toolGroup: {
                                        tool: {
                                            containment_element: '#tabs-container',
                                            cssClass: {
                                                dragContainer: 'tool-drag-container',
                                                disabledIconContainer: 'disabled-icon-container',
                                                disabledIcon: 'fw fw-lg fw-block tool-disabled-icon'
                                            }
                                        }
                                    }
                                }
                            },
                            preview: {
                                // relative selector within container for a tab
                                container: '.preview-container'
                            },
                            source_view: {
                                // relative selector within container for a tab
                                container: '.source-view-container',
                                theme: 'ace/theme/twilight',
                                font_size: '14pt',
                                scroll_margin: '20',
                                mode: 'ace/mode/ballerina'
                            },
                            swagger_view: {
                                // relative selector within container for a tab
                                container: '.swagger-view-container',
                                theme: 'ace/theme/tomorrow_night',
                                font_size: '12pt',
                                scroll_margin: '20',
                                mode: 'ace/mode/ballerina'
                            },
                            controls: {
                                view_source_btn: '.view-source-btn',
                                view_design_btn: '.view-design-btn',
                                view_swagger_btn: '.view-swagger-btn'
                            },
                            cssClass:{
                                text_editor_class: 'text-editor',
                                outer_box: 'outer-box',
                                svg_container: 'svg-container',
                                outer_div: 'panel panel-default container-outer-div',
                                panel_title: 'panel-title',
                                panel_icon: 'panel-icon',
                                service_icon: 'fw fw-service fw-inverse',
                                struct_icon: 'fw fw-struct fw-inverse',
                                connector_icon:'fw fw-connector fw-inverse',
                                function_icon:'fw fw-function fw-inverse',
                                main_function_icon:'fw fw-main-function fw-inverse',
                                title_link:'collapsed canvas-title',
                                panel_right_icon:'fw fw-up pull-right right-icon-clickable collapser hoverable',
                                head_div: 'canvas-heading',
                                body_div:'panel-collapse collapse',
                                canvas: 'panel-body collapse in',
                                design_view_drop: 'design-view-hover',
                                canvas_container: 'canvas-container',
                                canvas_top_controls_container: 'canvas-top-controls-container',
                                canvas_top_control_package_define: 'package-definition-wrapper',
                                canvas_top_control_packages_import: 'package-imports-wrapper',
                                canvas_top_control_constants_define: 'constants-definition-wrapper',
                                panel_delete_icon: 'fw fw-delete pull-right right-icon-clickable delete-icon hoverable',
                                panel_annotation_icon: 'fw fw-annotation pull-right right-icon-clickable hoverable',
                                panel_args_icon: 'fw fw-import pull-right right-icon-clickable hoverable',
                                type_mapper_icon: 'fw fw-type-converter fw-inverse',
                                type_struct_icon: 'fw fw-dgm-service fw-inverse',
                                canvas_heading_new: 'canvas-heading-new'
                            },
                            notifications: {
                                container: '#notification-container'
                            },
                            backend:{
                                url:"http://localhost:8289/ballerina/model/content"
                            },
                            dialog_boxes:{
                                parser_error: "#parserErrorModel"
                            }
                        }
                    }
                }

            },
            workspace_explorer: {
                container: ".sidebar-left",
                activateBtn: '.workspace-explorer-activate-btn',
                separator: '.sidebar-left-separator',
                containerToAdjust: ".right-container",
                command: {
                    id: "toggle-file-explorer",
                    shortcuts: {
                        mac: {
                            key: "command+shift+e",
                            label: "\u2318\u21E7E"
                        },
                        other: {
                            key: "ctrl+shift+e",
                            label: "Ctrl+Shift+E"
                        }
                    }
                },
                leftOffset: 40,
                separatorOffset: 5,
                defaultWidth: 290,
                resizeLimits:{
                    minX: 200,
                    maxX: 800
                },
                containerId: 'workspace-explorer',
                cssClass: {
                    container: 'workspace-explorer-container tab-pane',
                    openFolderButton: 'btn  btn-default open-folder-button'
                }
            },
            notifications:{
                container: "#notification-container"
            },
            dialog: {
                container: 'body'
            },
            about_dialog:{
                selector: "#modalAbout"
            },settings_dialog:{
                selector: "#modalSettings",
                submit_button: "#saveSettingsButton"
            },
            open_folder_dialog:{
                modal_selector: "#open-folder-modal",
                tree_container: ".file-tree",
                errors_container: ".errors-container",
                location_input: ".location-input",
                submit_button: ".open-button"
            },
            debugger : {
                container: ".sidebar-left",
                activateBtn: '.debugger-activate-btn',
                separator: '.sidebar-left-separator',
                containerToAdjust: ".right-container",
                leftOffset: 40,
                separatorOffset: 5,
                defaultWidth: 290,
                resizeLimits:{
                    minX: 200,
                    maxX: 800
                },
                containerId: "debugger",
                cssClass: {
                    container: 'debugger-container tab-pane'
                },
                command: {
                    id: "toggle-debugger",
                    shortcuts: {
                        mac: {
                            key: "command+shift+d",
                            label: "\u2318\u21E7d"
                        },
                        other: {
                            key: "ctrl+shift+d",
                            label: "Ctrl+Shift+d"
                        }
                    }
                }
            },
            launcher : {
                container: ".sidebar-left",
                activateBtn: '.launcher-activate-btn',
                separator: '.sidebar-left-separator',
                containerToAdjust: ".right-container",
                leftOffset: 40,
                separatorOffset: 5,
                defaultWidth: 290,
                resizeLimits:{
                    minX: 200,
                    maxX: 800
                },
                containerId: "launcher",
                cssClass: {
                    container: 'launcher-container tab-pane'
                },
                command: {
                    id: "toggle-launcher",
                    shortcuts: {
                        mac: {
                            key: "command+shift+r",
                            label: "\u2318\u21E7r"
                        },
                        other: {
                            key: "ctrl+shift+r",
                            label: "Ctrl+Shift+r"
                        }
                    }
                }
            }
        };
        app = new Application(config);
        app.render();
        app.displayInitialView();
    });

</script>
</body>
</html>
